<template>
    <div class="ClassList">
        <h1>书签管理</h1>
        <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">创建一级分类</a-button>
        <a-table rowKey="cid" :data-source="getClassData" :columns="columns">
            <template v-slot:title="{text,record}">
                <div v-if="datatext===text">
                    <a-input :value="dataClass.title" @input="changeValue" @blur="amendCategory" />
                </div>
                <div v-else @dblclick="redact(record,text)" title="双击修改名称">{{text}}</div>
            </template>
            <template v-slot:operation="{ record }">
                <a-button type="primary" @click="handleAdd(record)">添加</a-button>
                <a-button @click="editCategory(record)">编辑</a-button>
                <a-popconfirm
                    v-if="getClassData.length"
                    title="是否确认删除?"
                    cancelText="取消"
                    okText="确认"
                    okType="danger"
                    @confirm="onDelete(record.cid)"
                >
                    <a-button type="primary" danger>删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>
        <BookmarksClassEdit 
        :editBookmarksCategory="editBookmarksCategory" 
        :visible="visible" 
        @onClose="visible = false"
        @onData="amendChildrenCategory"
        ></BookmarksClassEdit>
    </div>
</template>

<script>
/**
 * Vuex 数据模块路径 store/ClassList.js
 */
import { warning,success } from "@/antd";
import { mapGetters } from "vuex";
import BookmarksClassEdit from "../../components/BookmarksClassEdit.vue";
export default {
    name: "ClassList",
    data() {
        return {
            editBookmarksCategory:{},
            dataClass: {},
            datatext: "",
            classId:"",
            columns: [
                {
                    title: "分类ID",
                    dataIndex: "cid",
                    key: "cid",
                    width: '20%',
                },
                {
                    title: "类别名称",
                    dataIndex: "title",
                    slots: {
                        customRender: "title",
                    },
                },
                {
                    title: "父级ID",
                    dataIndex: "pid",
                    width: '20%',
                },
                {
                    title: "操作",
                    dataIndex: "operation",
                    width: '20%',
                    slots: {
                        customRender: "operation",
                    },
                }
            ],
            visible:false,
        };
    },
    components: { 
        BookmarksClassEdit 
    },
    methods: {
        editCategory(record){
            this.visible = true;
            this.editBookmarksCategory = {...record}
        },
        changeValue(e) {
            this.dataClass.title = e.target.value;
        },
        amendChildrenCategory(data) {
            const promise = new Promise((resolve)=>{
                if(Object.keys(data).length) {
                    this.dataClass = {
                        classId: data.cid,
                        ...data
                    }
                }
                resolve()
            })
                promise.then(()=>{
                    this.amendCategory()
                })
        },
        amendCategory() {
            this.datatext = "";
            this.$store.dispatch("amendClass", this.dataClass)
                .then(() => {
                success("修改成功");
            })
                .catch((err) => {
                warning(err);
            });
        },
        redact(record, text) {
            this.datatext = text;
            this.dataClass = {
                classId: record.cid,
                ...record
            };
        },
        handleAdd(data) {
            if (data instanceof MouseEvent) {
                data = {};
                data.cid = 0;
                data.title = "顶级分类";
            }
            const params = { ...data };
            if (params.children) {
                delete params.children;
            }
            this.$router.push({
                name: "ClassAdd",
                query: {
                    ...params
                }
            });
        },
        onDelete(classId) {
            this.$store.dispatch("DeleteClass", classId)
                .then(() => {
                success("删除成功");
            })
                .catch((err) => {
                warning(err);
            });
        },
    },
    computed: {
        ...mapGetters(["getClassData"]),
    },
    created() {
        this.$store.dispatch("getClass").catch((error) => {
            warning(error);
        });
    },
    
};
</script>

<style scoped></style>
